<template>
  <CategorySelector
    style="margin-bottom: 10px"
    :disabledSelector="isShowAttrList"
  ></CategorySelector>
  <!-- :disabledSelector="isShowAttrList" 给子组件传值确定是否可以被选择 -->
  <el-card>
    <div v-if="isShowAttrList">
      <el-button
        type="primary"
        :icon="Plus"
        @click="tpAddAttr"
        :disabled="!categoryStore.category3Id"
        >添加属性</el-button
      >
      <el-table :data="attrList" border style="margin-top: 10px">
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="80px"
        ></el-table-column>
        <el-table-column label="属性名称" width="100px"></el-table-column>
        <el-table-column label="属性值列表">
          <template v-slot="{ row }">
            <el-tag
              class="ml-2"
              style="margin-right: 6px"
              type="success"
              v-for="attrValue in row.attrValueList"
              :key="attrValue.id"
              >{{ attrValue.valueName }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template v-slot="{ row }">
            <el-button
              size="small"
              type="warning"
              :icon="Edit"
              @click="toEditAttrInfo(row)"
            ></el-button>
            <el-popconfirm
              title="确定要删除此条属性吗?"
              @confirm="deleteAttrInfo(row.id)"
            >
              <template #reference>
                <el-button
                  :icon="Delete"
                  type="danger"
                  size="small"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else>
      <el-form>
        <el-form-item :inLine="true" class="demo-form-inline">
          <input v-model="attrInfo.attrName" placeholder="请输入用户名" />
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        @click="addAttrValue"
        :disabled="!attrInfo.attrName"
        >添加属性值</el-button
      >
      <el-table :data="attrInfo.attrValueList" style="margin: 10px">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80px"
        ></el-table-column>
        <el-table-column label="属性值名称">
          <template v-slot="{ row, $index }">
            <el-input
              ref="inputRef"
              v-if="row.isShowInput"
              v-model="row.valueName"
              size="small"
              placeholder="请输入属性值"
              @blur="deleteCurrentRow(row, $index)"
            ></el-input>
            <span
              @dblclick="toEditCurrentRow(row, $index)"
              v-else
              style="display: inline-block; width: 80%"
              >{{ row.valueName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ $index }">
            <el-popconfirm
              title="确定要删除此条属性值吗?"
              @confirm="deleteAttrValue($index)"
            >
              <template #reference>
                <el-button
                  :icon="Delete"
                  type="danger"
                  size="small"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 根据属性值列表的长度动态确定是否可选 -->
      <el-button
        type="priame"
        :disabled="!attrInfo.attrValueList.length"
        @click="toAddOrUpdateAttr"
        >保存</el-button
      >
      <el-button type="default" @click="isShowAttrList = true">取消</el-button>
    </div>
  </el-card>
</template>

<script lang="ts">
import CategorySelector from "@/components/CategorySelector/index.vue";
import { ElMessage } from "element-plus";
export default {
  name: "attr",
  components: {
    CategorySelector,
  },
};
</script>
<script lang="ts" setup>
import { reactive, ref, watch, nextTick } from "vue";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import {
  reqGetAttrListData,
  reqSaveAttrListData,
  reqDeleteAttrListData,
} from "@/api/product/attr";
import { useCategorySelectorInfoStore } from "@/stores/categorySelector";
import type {
  attrInfoModel,
  attrListModel,
  attrValueModel,
} from "@/api/product/model/attrModel";
const attrList = ref<attrListModel>([]);
const isShowAttrList = ref(true);
const categoryStore = useCategorySelectorInfoStore();
// 定义的存储属性的对象   这个对象会在保存的时候作为参数发送出去
const attrInfo = reactive<attrInfoModel>({
  attrName: "", // 待添加的属性名
  attrValueList: [], // 属性名对应的那些具体的属性值
  categoryId: -1, // 三级分类的具体的id
  categoryLevel: 3, // 几级分类 当前添加的只有一个三级分类 所以写3即可
});
// const attrValueName= ref('')

const inputRef = ref();
// 获取属性列表值 根据三级id发送求情获取数据!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!(数据内容是属性的列表)
const getAttrListData = async () => {
  attrList.value = await reqGetAttrListData({
    category1Id: categoryStore.category1Id,
    category2Id: categoryStore.category2Id,
    category3Id: categoryStore.category3Id,
  });
};

// 添加属性   向attrInfo对象的attrValueList数组放入新的数据
// 新数据时以对象的形式push到数组中   包含属性valueName  和   isShowInput
const addAttrValue = () => {
  attrInfo.attrValueList.push({
    valueName: "",
    isShowInput: true,
  });
  // 等页面渲染完后让input获得焦点
  nextTick(() => {
    inputRef.value?.focus();
  });
};
// 判断input失去焦点时是否还要显示
const deleteCurrentRow = (row: attrValueModel, index: number) => {
  const item = attrInfo.attrValueList
    .slice(0, -1)
    .find((item) => item.valueName === row.valueName);
  // 如果input值为空或者存在相同的属性值，将这个项目从列表中删除
  if (!row.valueName || (item && !row.id)) {
    attrInfo.attrValueList.splice(index, 1);
    return;
  }
  row.isShowInput = false;
};
// 删除属性值
const deleteAttrValue = (index: number) => {
  // 根据当前的索引将这个项目删除
  attrInfo.attrValueList.splice(index, 1);
};
// 添加新属性时先将旧属性删除清空
const tpAddAttr = () => {
  // 跳转页面的画面，让添加的页面显示，添加的详情页不显示
  isShowAttrList.value = false;
  // 清空页面数据
  attrInfo.attrName = "";
  attrInfo.attrValueList = [];
};
// 双击编辑属性值
const toEditCurrentRow = (row: attrValueModel, index: number) => {
  // 打开input
  row.isShowInput = true;
  nextTick(() => {
    inputRef.value?.focus();
  });
};
// 添加新属性
const toAddOrUpdateAttr = async () => {
  // 先将当前的三级id赋值
  attrInfo.categoryId = categoryStore.category3Id as number;
  // 发送请求
  await reqSaveAttrListData(attrInfo);
  ElMessage.success("属性添加成功");
  // 返回属性列表
  isShowAttrList.value = true;
  // 重新获取属性列表
  getAttrListData();
};
// 删除新属性
const deleteAttrInfo = async (id: number) => {
  // 根据id发送删除请求
  await reqDeleteAttrListData(id);
  ElMessage.success("删除属性成功...");
  // 不在发送请求，从列表中过滤
  attrList.value = attrList.value.filter((item) => {
    return item.id != id;
  });
};
// 监听对象中的某个属性，如下监听的时categorayStore的category3id属性
const toEditAttrInfo = async (row: attrInfoModel) => {
  isShowAttrList.value = false;
  Object.assign(attrInfo, row);
};
watch(
  () => categoryStore.category3Id,
  (category3Id) => {
    console.log("attr", category3Id);
    // 如果不存在，让属性列表清空
    if (!category3Id) {
      attrList.value = [];
      return;
    }
    // 如果id存在重新获取属性列表
    getAttrListData();
  }
);
</script>
<style></style>
